<template>
	<button @click="clickHandle" class="m-button" :open-type="openType" @chooseavatar="chooseavatar" @getuserinfo="getuserinfo"
		@getphonenumber="getphonenumber" form-type="submit"
		:class="['m-button--'+ type,isTouch?'tap-active':'',block?'block':'',className]" :disabled='disabled'
		:style="[boxStyle,fontStyle]">
		<view class="m-button--loading-box flex-center" :class="[`${type}`]" v-if="loading">
			<image class="loading" :src="loadingType"></image>
			<text :style="{'font-size': ftsize + 'rpx'}">{{loadingText}}</text>
		</view>
		<slot></slot>
	</button>
</template>
<script>
	/**
	 * m-button 
	 * @description 按钮
	 *  property { String } 		type			按钮预置样式  defalut theme主题色 success warning error disable 不可用
	 *  property { Boolean } 		isTouch			是否开启点击反馈
	 *  property { Boolean } 		hollow			是否是空心 （不设置背景）
	 *  property { String } 		loadingText		加载提示语
	 *  property { String } 		wh			按钮大小  默认l大号  和  s小号
	 *  property { String } 		bordercolor		按钮宽边框色
	 *  property { String } 		bgColor				按钮背景色
	 *  */
	const spinPng = require('@/static/images/UI/btn-spin.png')
	const spinGrey = require('@/static/images/UI/btn-spin-grey.png')
	import mixin from "../../libs/mixin/mixin.js"
	export default {
		mixins: [mixin],
		name: "m-button",
		props: {
			type: {
				type: String,
				default: 'theme',
			},
			isTouch: {
				type: Boolean,
				default: false,
			},
			block: {
				type: Boolean,
				default: false,
			},
			hollow: {
				type: Boolean,
				default: false,
			},
			loadingText: {
				type: String,
				default: '',
			},
			bordercolor: {
				type: String,
				default: '',
			},
			radius: {
				type: String,
				default: '20',
			},
			border: {
				type: String,
				default: '1',
			},
			openType: {
				type: String,
				default: '',
			},
		},
		computed: {
			colorType() {
				return {
					'theme': 'var(--theme)',
					'success': 'var(--success)',
					'warning': 'var(--warning)',
					'error': 'var(--error)',
					'disabled': 'var(--disabled)',
				} [this.type] || ''
			},

			boxStyle() {
				const style = {
					...this.style,
					'border': `${ this.border}rpx solid`,
					'border-color': this.bordercolor || this.bgColor || this.colorType,
					"background": this.hollow ? "unset" : this.bgColor || this.colorType,
				}
				return style
			},
			fontStyle() {
				const fts = {
					'fontSize': this.ftsize + 'rpx',
					'fontWeight': this.weight,
					'color': this.hollow ? this.bgColor || this.colorType : this.color,
				}
				if (this.loading) {
					if (this.hollow) {
						fts.color = 'rgba(0, 0, 0, 0) !important'
					} else {
						fts.color = this.bgColor || this.colorType
					}
				}
				return fts
			},
			loadingType() {
				if (this.hollow) {
					return spinGrey
				}
				return spinPng
			},
		},
		methods: {
			chooseavatar(e) {
				this.$emit('chooseavatar',e)
			},
			getuserinfo(e) {
				this.$emit('getuserinfo',e)
			},
			getphonenumber(e) {
				this.$emit('getphonenumber',e)
			},
		}
	}
</script>

<style lang="scss">
	button {
		border: unset;
		line-height: unset;
		border: unset;

		&::after {
			display: none;
		}
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}




	.m-button {
		position: relative;
		border-radius: var(--m_btn_rad);
		align-items: center;
		justify-content: center;
		font-size: var(--fs_26);
		padding: var(--m_pad10) 30rpx;
		display: inline-flex;



		&--loading-box {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;

			.loading {
				width: 30rpx;
				height: 30rpx;
			}

			text {
				margin-left: 10rpx;
				color: #fff;
			}
		}


		&--theme {
			border: 1px solid var(--theme);
			color: var(--text_Whi);
			background: var(--theme);
		}

		//默认色
		&--default {
			border: 1px solid var(--defalut);
			background: unset;
			color: var(--text);
		}


		&--success {
			background: var(--success);
			color: var(--text_Whi)
		}

		&--warning {
			background: var(--warning);
			color: var(--text_Whi)
		}

		&--error {
			background: var(--error);
			color: var(--text_Whi)
		}


		&--disabled {
			background: var(--btn_disabled) !important;
			color: #333 !important;
			border-color: var(--btn_disabled) !important;
		}
	}

	.block {
		width: 100%;
		font-size: 32rpx;
		padding: 22rpx 0rpx;
		display: inline-flex;
	}

	.tap-active {
		&:active {
			&:before {
				opacity: .05;
			}
		}

		&:before {
			content: "";
			display: block;
			position: absolute;
			z-index: 9;
			top: 50%;
			left: 50%;
			width: 100%;
			height: 100%;
			background: #000;

			border: inherit;
			border-color: #000;
			border-radius: inherit;
			transform: translate(-50%, -50%);
			opacity: 0;

		}
	}



	uni-button[disabled]:not([type]) {
		color: #333;
		opacity: 0.7;
		cursor: not-allowed !important;
		border-color: var(--btn_disabled) !important;

		&:before {
			display: none !important;
		}
	}
</style>